<!DOCTYPE html>
<html>
<head>
  <title>登录</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
 
  <link rel="stylesheet" href="bootstrap4/css/bootstrap.min.css">
  <link rel="stylesheet" href="css2/style2.css">
   <!-- 
  <script src="js2/jquery.min.js"></script>
  <script src="js2/popper.min.js"></script>
   -->
  <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
  <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
  <script src="bootstrap4/js/bootstrap.min.js"></script>
  
  <script src="js2/my.js"></script>
  
</head>
<script type="text/javascript">
	$(function(){
		$("#loginInfo").validate({
            rules: {
                "username": {
                    required: true
                },
                "password":{
                    required:true
                }
            },
            messages:{
                "username":{
                    required:"用户名不能为空"
                },
                "password":{
                    required:"密码不能为空"
                }
            },
            submitHandler:function(form){
            	$.ajax({
                    //几个参数需要注意一下
                        type: "POST",//方法类型
                        dataType: "json",//预期服务器返回的数据类型
                        url: "loginInfo" ,//url
                        data: $('#loginInfo').serialize(),
                        success: function (result) {
            	
         
	                        if(result.code == '27'){ 
	                        	alert(result.msg);
	                                window.location.href="index";
	                         
	                        }else{
	                            alert(result.msg);
	                        } 
                        }
                });
            },
            //自定义错误样式
            errorClass:"text-danger",
            //未通过验证,进行高亮处理或其他处理；
            highlight:function(input){
                $(input).closest(".form-group").addClass("has-error");
            },
            //通过验证,清除高亮效果或其他处理；
            unhighlight:function(input){
                $(input).closest(".form-group").removeClass("has-error");
            }
		});
	});
	
</script> 
<body>
<form id="loginInfo"  th:action="@{/loginInfo}" method="POST">
<div class="container mt30">
  	<h3 class="text-center"> 用户登录 </h3> 
    <div class="form-group">
       <div class="single-payment-method"> 
       		<img class="mb-3" src="img/bg-img/8.jpeg"   width="100%"alt="">
       </div>
    </div>
    <!--下面是用户名输入框-->
    <div class="form-group"> 
      <label for="username" >@用户名 </label>
      <input id="username" name="username" type="text" 
      	class="form-control" placeholder="用户名" aria-describedby="basic-addon1" />
    </div>
     
     <!--下面是密码输入框-->
     <div class="form-group"> 
      <label for="userInfoPassword" >@密码 </label>
      <input id="password" name="password" type="password" 
       	class="form-control" placeholder="密码" aria-describedby="basic-addon1" />
    </div>
     <button type="submit" class="btn btn-default  btn-block">登 录</button>
</div>
</form>
</body>
</html>